<template>
  <div>
    <el-row>

      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>栏目管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
      <el-col>
        <el-card class="box-card t30"
                 shadow="never">
          <div slot="header"
               class="clearfix">
            <span>内容列表</span>
            <el-button style="float: right; padding: 3px 0"
                       type="text">添加文章</el-button>
          </div>
          <div class="list-wz">
            <div class="list-wz-dt list-wz-item">
              <ul>
                <li class="l-code1">
                  <input name="arcID"
                         class="cityId"
                         lay-skin="primary"
                         type="checkbox"
                         id="arcID"
                         value="all">
                </li>
                <li class="l-code1">
                  ID
                </li>

                <li class="l-title">
                  文章标题
                </li>
                <li class="l-code">
                  更新时间
                </li>
                <li class="l-code3">
                  所属栏目
                </li>
                <li class="l-code">
                  点击次数
                </li>
                <li class="l-code">
                  发布人
                </li>
                <li class="l-code3">
                  操作
                </li>
              </ul>
            </div>
            <template>
              <div class="list-wz-item"
                   v-for="item in list"
                   :key="item.id">
                <ul>
                  <li class="l-code1">
                    <el-radio :label="item.id">.</el-radio>
                  </li>
                  <li class="l-code1">
                    {{item.id}}
                  </li>
                  <li class="l-title">
                    <router-link :to="'/article/edit/'+item.id">
                      {{item.title}}</router-link>
                    <el-tag v-if="item.litpic"
                            effect="dark"
                            size="mini">
                      图片</el-tag>
                  </li>
                  <li class="l-code">
                    {{item.pubdate}}
                  </li>
                  <li class="l-code3">
                    {{item.typename}}
                  </li>
                  <li class="l-code">
                    {{item.click}}
                  </li>
                  <li class="l-code">
                    {{item.midname}}
                  </li>
                  <li class="l-code3">
                    <el-button-group>
                      <el-button type="primary"
                                 icon="el-icon-edit"
                                 size="mini"></el-button>
                      <el-button type="info"
                                 icon="el-icon-share"
                                 size="mini"></el-button>
                      <el-button type="danger"
                                 icon="el-icon-delete"
                                 size="mini"></el-button>
                    </el-button-group>
                  </li>
                </ul>
              </div>
            </template>

          </div>
          <el-pagination class="t30"
                         background
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :page-sizes="[20, 40, 60, 80]"
                         :page-size="20"
                         layout="sizes, prev, pager, next"
                         :total="total">
          </el-pagination>
        </el-card>

      </el-col>

    </el-row>
  </div>
</template>

<script>
import { contentlistarc } from '../../axios/api'
export default {
  data () {
    return {
      list: [],
      total: 0,
      typeid: '',
      page: 1,
      pagesize: 20,
      channelid: ''
    }
  },
  mounted () {
    this.typeid = this.$route.params.id
    this.handlelist()
    console.log(this.typeid)
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页条` + val)
      this.pagesize = val
      this.handlelist()
    },
    handleCurrentChange (val) {
      console.log(`当前页:` + val)
      this.page++
      this.handlelist()
    },
    handlelist () {
      let typeid = this.typeid
      let page = this.page
      let pagesize = this.pagesize
      let channelid = this.channelid
      contentlistarc(typeid, channelid, page, pagesize).then(res => {
        console.log(res.data.data)
        if (res.data.state === 1) {
          this.list = res.data.data.data
          if (Number(res.data.data.total) !== this.total) {
            this.total = Number(res.data.data.total)
          }
        }
      })
    }
  },
  watch: {
    '$route': function (to, from) {
      console.log(this.typeid)
      this.typeid = to.params.id
      this.page = 1
      this.handlelist()
      console.log('当前page' + this.page)
    }
  }
}
</script>

<style lang='less' scoped>
.list-wz {
  border-top: 1px solid #e6e6e6;
  .list-wz-item {
    &.list-wz-dt {
      background-color: @base !important;
      * {
        border-color: lighten(@base, 3%);
        color: #fff;
      }
    }
    &:not(.list-wz-dt) {
      &:hover {
        background-color: #e2e2e2;
      }
    }
    .transition(0.5s);
    //padding: 15px 0;
    &:nth-child(2n-1) {
      background-color: #f6f6f6;
    }
    ul {
      list-style: none;
      .flex-block();
      border-left: 1px solid #e6e6e6;
      line-height: 30px;
      .align-items(center);

      li {
        padding: 15px 0;
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        .zihang(1);
      }
      a {
        color: #333;
        &:hover {
          color: @base;
        }
      }
      .l-title {
        .flex(1);
        .zihang(1);
        padding: 15px 10px;
      }
      .l-code {
        width: 100px;
        .tc;
      }
      .l-code3 {
        width: 180px;
        .tc;
      }
      .l-code1 {
        width: 60px;
        .tc;
      }
    }
  }
}
</style>
